//图表概览  成员概括
//获取数据
function getstudentOverview() {
    axios.get('/student/overview')
        .then(r => {
            if (r.data.code === 0) {
                console.log(r);
                const { total, avgSalary, avgAge, proportion } = r.data.data
                document.querySelector('.total').innerText = total;
                document.querySelector('.avgSalary').innerText = avgSalary;
                document.querySelector('.avgAge').innerText = avgAge;
                document.querySelector('.proportion').innerText = proportion;

            }
        })
}
getstudentOverview()
function getStudentList() {
    axios.get('/student/list').then((result) => {
      const list = result.data.data;
     
      salaryLine(list);
      // 籍贯饼图
      homeTown(list);
    });
  }

  //班级薪资
function salaryLine(list){
   
   // 拆分 期望薪资数组
const salarys = list.map((v) => v.salary);
// 拆分 实际薪资数组
const truesalarys = list.map((v) => v.truesalary);
  
// 拆分 名单数组
const names = list.map((v) => v.name);
// 接收数组 渲染折线图
  // 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.line'));
const option = {
    color:['#f07777','#8095d4'],
title: {
 text: '薪资 Salary'
},
tooltip: {
 trigger: 'axis'
},
legend: {},

xAxis: {
 type: 'category',
 boundaryGap: false,
 data: names
},
yAxis: {
 type: 'value',

},
dataZoom: [
    {
        type: 'inside',
     
      start: 0,
      end: 10,
     
    },
    {
      
     
      start: 0,
      end: 10,
    
    }
  ],
series: [
 {
   name: '期望薪资',
   type: 'line',
   smooth: true,
   symbol: 'circle',
   data: salarys,
   
  
 },
 {
   name: '实际薪资',
   type: 'line',
   data: truesalarys,
   smooth: true,
   symbol: 'circle',
   
 }
]
};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}
//省份  饼状图
function homeTown(list){
    /* 
  1 定义一个空数组 表示 处理后的数据    
    [
    {value:5,name:"广东省"},
    {value:15,name:"贵州省"},
    ]

  2 对 list做遍历
    1 判断一下 当前被遍历的元素 是否存在于 新数组中
    2 如果不存在 新数组push一个新的对象  {value:1,name:"广东"}
    3 如果存在  找到数组中的元素，给它value值 +1 
   */

const newList = []
list.forEach((v) => {

    let index = newList.findIndex((vv) => vv.name === v.province);

     // 如果找到 index不等于-1
     if (index === -1) {
        newList.push({ value: 1, name: v.province });
      } else {
        newList[index].value++;
      }
});


     // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.querySelector('.pie'));
     const option  = {
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 150],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: newList
    }
  ]
};
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
}
//成绩柱状图
function getStudentOverview(batch){
    axios.get('/score/batch',{params:{batch}})
    .then(r=>{
        if(r.data.code === 0){

            const {avgScore,group,gt60,gt80,lt60} = r.data.data
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.barChart'));
const option = {
tooltip: {
 trigger: 'axis',
 axisPointer: {
   type: 'cross',
   crossStyle: {
     color: '#999'
   }
 }
},

legend: {
 data: ['平均分', '低于60分人数', '60-80分之间','高于80分人数']
},
grid:{
    top :30,
    bottom :20
},

xAxis: [
 {
   type: 'category',
   data: group,
   axisPointer: {
     type: 'shadow'
   }
 }
],
yAxis: [
 {
   type: 'value',
   
   min: 0,
   max: 100,
   interval: 10,
   axisLabel: {
     formatter: '{value} 分'
   }
 },
 {
   type: 'value',

   min: 0,
   max: 10,
   interval: 1,
   axisLabel: {
     formatter: '{value} 人'
   }
 }
],
series: [
 {
   name: '平均分',
   type: 'bar',
   tooltip: {
     valueFormatter: function (value) {
       return value + ' ml';
     }
   },
   data: avgScore
 },
 {
   name: '低于60分人数',
   type: 'bar',
   yAxisIndex: 1,
   tooltip: {
     valueFormatter: function (value) {
       return value + ' ml';
     }
   },
   data:lt60
 },
 {
    name: '60-80分之间',
    type: 'bar',
    yAxisIndex: 1,
    tooltip: {
      valueFormatter: function (value) {
        return value + ' ml';
      }
    },
    data:gt60
  },
  {
    name: '高于80分人数',
    type: 'bar',
    yAxisIndex: 1,
    tooltip: {
      valueFormatter: function (value) {
        return value + ' ml';
      }
    },
    data:gt80
  },


]
};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


        }
    })
}

const toggleBatchBtn = document.querySelector('#toggleBatchBtn');
const batchUl = document.querySelector('#batch');
//点击 三个点 菜单栏显示
toggleBatchBtn.addEventListener('click',function(e){
    batchUl.classList.toggle('show')
})
// 点击菜单切换 成绩
batchUl.addEventListener('click',function(e){
    if(e.target.nodeName === 'A'){
        const index = e.target.dataset.index
        getStudentOverview(index)
    }
})
getStudentList()

getStudentOverview(1)










